<template>
    <div>
        <el-dialog title="编辑会员" :visible.sync="isShow" :before-close="cancel" center>
            <el-form :model="memberForm" :rules="rules" ref="memberinfo">
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="memberForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
                    <el-input v-model="memberForm.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="memberForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="memberForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">修改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { memberInfo, memberEdit } from '../../request/api'
import {mapActions} from 'vuex'
export default {
    props: ['isShow'],
    data() {
        return {
            formLabelWidth: '120px',
            memberForm: {
                phone: '',
                nickname: '',
                password: '',
                status:1
            },
            rules: {
                nickname: [
                    { required: true, message: "请输入会员名称", trigger: "blur" },
                    { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                ],
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" },
                    { min: 11, max: 11, message: "长度在 11个字符", trigger: "blur" },
                ],
            }
        }
    },
    mounted() {
        this.getMemberAction()
    },
    methods: {
        ...mapActions({
            getMemberAction: 'member/getMemberAction',
        }),
        cancel() { 
            this.$emit('cancel', false)
            this.reset()
        },
        reset() { 
            this.memberForm = {
                phone: '',
                nickname: '',
                password: '',
                status:1
            }
            this.$refs.memberinfo.resetFields()
        },
        lookup(uid) {
            memberInfo({ uid }).then(res => {
                console.log(res);
                this.memberForm = res.list
                this.memberForm.uid = uid
                this.memberForm.password=''
            })
        },
        confirm() {
            this.$refs.memberinfo.validate(val => {
                if (val) {
                    memberEdit(this.memberForm).then(res => {
                        if (res.code == 200) {
                            console.log(res);
                            this.$message.success(res.msg)
                            this.getMemberAction()
                            this.cancel()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>

</style>